feat(web): rebuild the UI into the command-center app shell - #9
Merged
Conversation
Assemble the web app into the persistent command-center shell the design intends — a left nav sidebar, a system bar, a grouped session list, a session-detail rail, and Devices/Settings pages, with a slide-out launch drawer. Authenticated routes move into an (app) route group sharing one layout that owns the single relay connection (opened once, never torn down across navigation). - packages/ui: add IconButton, Pill, Panel, Drawer primitives, a trapFocus action, and an --accent-line token. - web components: Sidebar, SystemBar, MobileNav, LaunchDrawer, SessionRow, SessionGroupHeader, SessionHeader, SessionRail, PageHeader, PermissionModeField; grouped dashboard with header stats; Devices + Settings. - Pure, unit-tested $lib logic: session grouping/counts (session-groups), device presence (devices), change summary (changes), relative time (time), permission-mode persistence (settings), active-nav matching (nav). - Fix long device-name handling, replace the raw repo <select> with a styled accessible one, and route control sizing through the design system. - Bind only to persisted data (no fabricated repo/branch/diff/OS); responsive PWA layout with a phone bottom-nav + FAB. Gates: svelte-check, tsc, ESLint, Prettier, 201 web unit tests, and the production build all pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The web app was built surface-by-surface and never assembled into the command-center shell the design intends — no nav sidebar, no real system bar, no grouped session list, no session-detail rail, and no Devices/Settings/launch-drawer. It also had concrete defects: the rail mishandled long device names, the repo picker was a raw native
<select>, and control sizing was inconsistent.What
(app)shell (new route group, one shared layout): Sidebar (brand, route-aware nav with active indicator + counts, paired-device list, account footer), SystemBar (relay state · e2e · live agent counts), MobileNav (bottom tabs + FAB). The single relay connection now lives in the shell — opened once, never torn down across navigation.@telecode/uiprimitives:IconButton,Pill,Panel,Drawer+ atrapFocusaction and an--accent-linetoken.$liblogic: session grouping/counts, device presence, change summary, relative time, permission-mode persistence, active-nav matching.Defects fixed
Long device-name truncation; the "vibe-coded" repo dropdown (styled native
<select>); systematic control sizing; a mobile bug found during verification where the desktop sidebar overlapped content at phone width.Scope
Binds only to persisted data — the mockup's invented per-row meta (repo/branch, diff stats, device OS) is omitted, not faked. Persisting those is a follow-up.
Verification
svelte-check 0/0 ·
tsc0/0 · ESLint clean · Prettier clean · 201 web unit tests · production build OK. Reviewed by the project's TypeScript, test, and clean-code agents (zero blocking findings, all important findings applied) and manually screenshotted (sign-in, shell, Settings, Devices, launch drawer, responsive phone layout).